<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
		<title>T1支付 - 系统日志</title>
		<meta name="keywords" content=""/>
		<meta name="description" content=""/>
		
		<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/3.4.0/css/bootstrap.min.css"/>
		<link href="../../css/font-awesome.css" rel="stylesheet">
		<link href="../../css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
		
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="../../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/plugins/layer/layer.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/plugins/sweetalert/sweetalert.min.js"></script>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		
		
		
	</head>
	<body>
		<div id="app" class="col-xs-12 col-sm-10 col-lg-8 center-block" style="float: none;">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h3 class="panel-title">后台系统操作日志</h3>
				</div>
				<div class="panel-body">
					
					
					
					
					<div class="row" style="margin-bottom: 5px;">
						<div class="col-lg-6">
							<div class="input-group">
								<div class="input-group-btn">
									<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{search}}<span class="caret"></span></button>
									<ul class="dropdown-menu">
										<li v-for="item in searchList">
											<a @click="setsearch(item)">{{item}}</a>
										</li>
									</ul>
								</div>
								<!-- /btn-group -->
								<input v-model="keyword" type="text" class="form-control" :placeholder="place">
								
								<span class="input-group-btn">
							        <button @click="getpage" class="btn btn-primary" type="button">搜索</button>
							    </span>
								
							</div>
						</div>
					</div>
					
					
					
					<div class="table-responsive">
						
							
						
						
						<table class="table table-striped">
							<thead>
								<tr>
									<th @click="changeOrderby" :class="{'dropup':(orderby=='id降序')}">ID<span class="caret"></span></th>
									<th>操作</th>
									<th>备注</th>
									<th>日期</th>
								</tr>
							</thead>
							<tbody>
								<tr v-for="(item, index) in items">
									<th>{{ item.id }}</th>
									<th>{{ item.dowhat }}</th>
									<th>{{ item.message }}</th>
									<th>{{ item.addtime }}</th>
									
								</tr>
								<tr v-show="items.length==0">
									<th>加载中......</th>
									<th></th>
									<th></th>
									<th></th>
								</tr>
							</tbody>
						</table>
					</div>
					
					<p>
						<div>
							共 {{havenum}} 条数据,每页
							<span class="btn-group dropup">
								<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
							    	{{pagenum}}  <span class="caret"></span>
							  	</button>
								<ul class="dropdown-menu">
									<li><a @click="dopagenum(10)">10</a></li>
									<li><a @click="dopagenum(30)">30</a></li>
									<li><a @click="dopagenum(50)">50</a></li>
									<li><a @click="dopagenum(100)">100</a></li>
								</ul>
							</span>
							<span>
								条
							</span>
						</div>
						
						<div v-html="pagetext">
						
						</div>
					
					</p>
					
					
					
					
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					place:'关键词',
					pagetext: '',
					items: [],
					
					search:'备注',
					keyword:'',
					nowpage:'1',
					pagenum:'30',
					orderby:'',
					
					
					maxpage:'',
					havenum:'',
					
					searchList:['id','操作','备注','时间']
					
				},
				watch:{
					search(val){
						if(val=="id"){
							this.place = "日志id编号";
						}else if(val=="操作" || val=="备注"){
							this.place = "关键词";
						}else if(val=="时间"){
							this.place="日期描述";
						}else{
							this.place="关键词";
						}
					}
				},
				methods: {
					dopage(now, max) {
						now = Number(now);
						if(now<1 || !now || now==''){now=1;}
						let a = [];
						let b = [];
						for(let i = 0; i < 5; i++) {
							a[i] = now - 2 + i;
							if(a[i] >= 1 && a[i] <= max) {
								b.push(a[i]);
							}
						}
						let l = now - 1;
						let r = now + 1;
						
						if(now==1){
							var page = '<ul class="pagination"><li class="disabled"><a>首页</a></li><li class="disabled"><a>&laquo;</a></li>';
						}else{
							var page = '<ul class="pagination"><li><a  onclick="vm.getpage(1)">首页</a></li><li><a onclick="vm.getpage(' + l + ')">&laquo;</a></li>';
						}
							
						for(i = 0; i < b.length; i++) {
							if(b[i] == now) {
								page = page + '<li><a onclick="vm.getpage(' + b[i] + ')"><font color="red">' + b[i] + '</font></a></li>';
							} else {
								page = page + '<li><a onclick="vm.getpage(' + b[i] + ')">' + b[i] + '</a></li>';
							}
						}
						
						if(now==max){
							page = page + '<li  class="disabled"><a>&raquo;</a></li><li class="disabled"><a>尾页</a></li></ul>';	
						}else{
							page = page + '<li><a onclick="vm.getpage(' + r + ')">&raquo;</a></li><li><a onclick="vm.getpage(' + max + ')">尾页</a></li></ul>';
						}
						
						
						this.pagetext = page;
					},
					getpage(id){	// id -> 需要跳转的页数，默认不填为1
						if(!id){
							if(this.nowpage<0 || this.nowpage==''){
								this.nowpage=1;
							}
						}else{
							this.nowpage=id;
						}
						this.$http.post("../../log.do",{
							search:this.search,
							keyword:this.keyword,
							nowpage:this.nowpage,
							pagenum:this.pagenum,
							orderby:this.orderby
						}).then(function(res){
							if(res.data.code=="1"){//获取列表成功，更新变量
								this.items=res.data.data,
								this.search=res.data.modle.search,
								this.keyword=res.data.modle.keyword,
								this.nowpage=res.data.modle.nowpage,
								this.pagenum=res.data.modle.pagenum,
								this.orderby=res.data.modle.orderby,
								this.maxpage=res.data.modle.maxpage,
								this.havenum=res.data.modle.havenum
								this.dopage(this.nowpage,this.maxpage);
							}else if(res.data.code=='-1'){
								window.parent.frames.location.href="../../html/login.html" 
							}else{
								layer.alert('获取数据失败！请刷新页面重试',{icon:2});
							}
						},function(){
							layer.alert('服务器链接失败！请检查您的网络设置',{icon:2});
						})
						
					},
					dopagenum(num){
						this.pagenum=num;
						this.getpage();
					},
					changeOrderby(){
						if(this.orderby=="id降序" || this.orderby==''){
							this.orderby="id升序";
						}else{
							this.orderby="id降序";
						}
						this.getpage();
					},
					setsearch(val){
						this.search=val;
					},
					del(id){
						let that = this;
						  	swal({
						        title: "",
						        text: "是否删除记录(id="+id+")，删除之后无法恢复，请谨慎操作",
						        type: "warning",
						        showCancelButton: true,
						        confirmButtonColor: "#DD6B55",
						        confirmButtonText: "删除",
						        closeOnConfirm: false
						    }, function () {
						    	// ajax删除记录
						    	that.$http.post("../../log.do",{
						    		type:'del',
						    		id:id
						    	}).then(function(res){
						    		if(res.data.code==1){
						    			setTimeout(function(){
						    				that.getpage();
						    			},100);
						    			swal("删除成功！", "您已经永久删除了这条记录。", "success");
						    		}else{
						    			swal("删除失败",res.data.message,"error");
						    		}
						    	},function(){
						    		swal("删除失败", "服务器链接失败！", "error");
						    	})
						    });
					}
		
				},
				mounted: function() {
					this.getpage();
				}
		
			})
		</script>
	</body>
</html>
